<template>
  <div class="app-container shop-detail">
    <!-- 开店信息 -->
    <div class="tabs-con">
      <el-tabs v-model="activeName" :before-leave="confirmLeave">
        <!-- 基本信息 -->
        <el-tab-pane :label="$t('shopProcess.basicInfo')" name="shopDetail">
          <basic-infor
            ref="shopDetail"
            @backPage="backPage"
            @nextStep="nextStep($event, 'shopDetail', 'editRichText')"
          />
        </el-tab-pane>
        <el-tab-pane
          :label="$t('shopProcess.storeDetails')"
          name="editRichText"
        >
          <outletInfoDetails
            :canEdit="true"
            v-model="activeNameList.shopDetail"
            @updateContent="updateContentRichText"
            ref="editRichText"
            @preStep="toTabPane('shopDetail')"
            @nextStep="nextStep($event, 'editRichText', 'company')"
          />
        </el-tab-pane>

        <!-- 工商信息 -->
        <el-tab-pane :label="$t('shopProcess.businessInfo')" name="company">
          <!-- <business-infor
          ref="company"
          @preStep="toTabPane('shopDetail')"
          @nextStep="nextStep($event, 'company', 'categorySigningList')"
          /> -->
          <business-infor
            ref="company"
            @preStep="toTabPane('editRichText')"
            @nextStep="
              nextStep($event, 'company', 'categorySigningList'),
                submitComplete()
            "
          />
        </el-tab-pane>
        <!-- 业态类别 -->
        <!-- <el-tab-pane
          :label="$t('shopProcess.signingInfo')"
          name="categorySigningList"
        >
          <signing-infor
            ref="categorySigningList"
            @preStep="toTabPane('shopDetail')"
            @nextStep="nextStep($event, 'categorySigningList', 'shopBankCards')"
          />
        </el-tab-pane> -->
        <!-- 财务信息 -->
        <!-- <el-tab-pane
          :label="$t('shopProcess.financeInfo')"
          name="shopBankCards"
        >
          <financial-infor
            ref="shopBankCards"
            @preStep="toTabPane('categorySigningList')"
            @nextStep="checkPermissionSettings"
          />
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import basicInfor from "./basic-infor.vue";
  import businessInfor from "./business-infor.vue";
  import financialInfor from "./financial-infor.vue";
  // import permissionSet from './permission-set.vue'
  import signingInfor from "./signing-infor.vue";
  import outletInfoDetails from "../outlet/outlet-info-details.vue";
  import { Debounce } from "@/utils/debounce";
  export default {
    components: {
      basicInfor,
      businessInfor,
      financialInfor,
      signingInfor,
      outletInfoDetails,
    },
    data() {
      return {
        // 当前展示页面
        // activeName: "shopDetail",
        activeName: "shopDetail",

        activeNameList: {
          // 基本信息
          shopDetail: {},
          // 工商信息
          // categorySigningList: '',
          // 业态类别
          categorySigningList: [],
          // 财务信息
          shopBankCards: "",
        },
      };
    },

    mounted() {},
    methods: {
      /**
       * 去往下一栏触发
       */
      async confirmLeave(newName, oldName) {
        if (oldName === "shopConfig") return true;
        // 上一页 不触发校验表单
        if (
          (oldName === "categorySigningList" && newName === "shopDetail") ||
          (oldName === "editRichText" && newName === "company") ||
          (oldName === "company" && newName === "editRichText")
        )
          return true;
        if (
          oldName === "shopBankCards" &&
          (newName === "categorySigningList" || newName === "shopDetail")
        )
          return true;
        // 触发页面的数据规则判断
        await this.$refs[oldName].formVoidInterdiction();
      },
      updateContentRichText(htm) {
        this.$set(this.activeNameList.shopDetail, "content", htm);
      },
      /**
       * 保存数据, 进入下一页
       * @param {*} childObj 保存信息
       * @param {*} setName 指定存储名称
       * @param {*} nextTabPaneName 下一页的activeName值
       */
      nextStep(childObj, setName, nextTabPaneName) {
        console.log("childObj", childObj);
        console.log("setName", setName);
        console.log("nextTabPaneName", nextTabPaneName);
        if (setName == "categorySigningList") {
          //  只筛选二级的 grade为1
          let secondCategoryList = childObj.map((item) => item.parentId);
          let secondCategoryRes = Array.from(new Set(secondCategoryList));
          this.$set(this.activeNameList.shopDetail, "secondaryCategoryInfoObj", {
            categoryIds: secondCategoryRes,
          });
        }
        if (setName !== "editRichText") {
          this.$set(this.activeNameList, setName, childObj);
        }
        if (nextTabPaneName == "categorySigningList") {
          return;
        }
        console.log(this.activeNameList);
        this.toTabPane(nextTabPaneName);
      },
      /**
       * 保存权限设置
       */
      checkPermissionSettings(obj) {
        this.$set(this.activeNameList, "shopBankCards", obj);
        this.submitComplete();
      },
      /**
       * 去往指定tab页
       */
      toTabPane(numStr) {
        this.activeName = numStr;
      },
      /**
       * 提交 新建门店数据
       */
      submitComplete: Debounce(function () {
        let formData = this.activeNameList;
        console.log(formData);
        for (let i in formData) {
          if (!formData[i] || JSON.stringify(formData[i]) === "{}") {
            if (i === "shopDetail")
              return this.$message.error(this.$t("shopProcess.submitTxt1"));
            if (i === "categorySigningList")
              return this.$message.error(this.$t("shopProcess.submitTxt2"));
            // if (i === "shopBankCards")
            //   return this.$message.error(this.$t("shopProcess.submitTxt3"));
          }
        }

        this.$http({
          url: this.$http.adornUrl("/platform/shop"),
          method: "post",
          data: this.$http.adornData({
            shopDetail: formData.shopDetail,
            categorySigningList: formData.categorySigningList,
            shopBankCards: formData.shopBankCards,
            company: formData.company,
          }),
        }).then(({ data }) => {
          return this.$message({
            message: this.$t("shopProcess.submitTxt5"),
            type: "success",
            duration: 1500,
            onClose: () => {
              this.backPage();
            },
          });
        });
      }, 1500),
      /**
       * 返回 门店管理
       */
      backPage() {
        this.$router.push("/platform-outlet/auditOutlet");
      },
    },
  };
</script>

<style lang="scss" scoped>
  // 开店协议
  .agreement-box {
    .title {
      text-align: center;
      font-size: 22px;
      height: 80px;
      line-height: 80px;
    }
    .sa-content {
      width: 100%;
      height: 517px;
      padding: 30px 33px 25px;
      border: 1px solid #eaeaea;
      box-sizing: border-box;
      overflow-y: scroll;
      /* 谷歌隐藏滚动条 */
      &::-webkit-scrollbar {
        display: none;
      }
      /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
      /* IE隐藏滚动条 */
      -ms-overflow-style: none;
      /* 火狐隐藏滚动条 */
      overflow: -moz-scrollbars-none;
    }
    .sa-checkbox {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      cursor: pointer;
      .text {
        font-size: 14px;
        color: #000;
        .flag {
          color: #155bd4;
        }
      }
    }
    .btn-row {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }

  .app-container.shop-detail {
    font-size: 14px;
    color: #333;
    ::v-deep .el-input__inner {
      border-radius: 2px !important;
    }
    ::v-deep .el-textarea__inner {
      border-radius: 2px !important;
    }
    .head-title {
      margin-bottom: 15px;
    }
  }
</style>
